import React, { Component, createRef } from 'react'
import echarts from 'echarts'
import { Button, Spin } from 'antd'
import './chart.less'
import { getChartData } from '../../../requests'
import { antIcon } from '../../loading'

export default class BooksUploadNumChart extends Component {
  constructor() {
    super()
    this.booksTrends = createRef()
    this.state = {
      booksUploadNumChartData: {},
      isLoading: true
    }
  }
  componentDidMount() {
    this.getBooksUploadNumChartData()
    this.booksTrendsChart = echarts.init(this.booksTrends.current)
  }
  //获取图表数据
  getBooksUploadNumChartData() {
    getChartData().then(resp => {
      console.log(resp.data.data.booksUploadNumChartData)
      if (resp.data.res_code === 200) {
        this.setState(
          {
            isLoading: false,
            booksUploadNumChartData: resp.data.data.booksUploadNumChartData
          },
          () => {
            this.booksTrendsChart.setOption({
              title: {
                text: '上周书籍上传量'
              },
              xAxis: {
                name: '星期',
                type: 'category',
                data: [
                  '星期一',
                  '星期二',
                  '星期三',
                  '星期四',
                  '星期五',
                  '星期六',
                  '星期日'
                ],
                axisLabel: {
                  margin: 20
                }
              },
              yAxis: {
                name: '上传量/本',
                type: 'value'
              },
              series: [
                {
                  data: this.state.booksUploadNumChartData.weekChartData,
                  type: 'line',
                  smooth: true
                }
              ]
            })
          }
        )
      }
    })
  }
  //上周上传量
  weekChart() {
    this.booksTrendsChart.setOption({
      title: {
        text: '上周书籍上传量'
      },
      xAxis: {
        name: '星期',
        type: 'category',
        data: [
          '星期一',
          '星期二',
          '星期三',
          '星期四',
          '星期五',
          '星期六',
          '星期日'
        ],
        axisLabel: {
          margin: 20
        }
      },
      yAxis: {
        name: '上传量/本',
        type: 'value'
      },
      series: [
        {
          data: this.state.booksUploadNumChartData.weekChartData,
          type: 'line',
          smooth: true
        }
      ]
    })
  }
  //上月上传量
  monthChart() {
    this.booksTrendsChart.setOption({
      title: {
        text: '上月书籍上传量'
      },
      xAxis: {
        name: '号',
        type: 'category',
        data: [
          '1-3',
          '4-6',
          '7-9',
          '10-12',
          '13-15',
          '16-18',
          '19-21',
          '22-24',
          '25-27',
          '28-30,31'
        ],
        axisLabel: {
          margin: 20
        }
      },
      yAxis: {
        name: '上传量/本',
        type: 'value'
      },
      series: [
        {
          data: this.state.booksUploadNumChartData.monthChartDta,
          type: 'line',
          smooth: true
        }
      ]
    })
  }
  //去年上传量
  lastYearChart() {
    this.booksTrendsChart.setOption({
      title: {
        text: '去年书籍上传量'
      },
      xAxis: {
        name: '月',
        type: 'category',
        data: [
          '一月',
          '二月',
          '三月',
          '四月',
          '五月',
          '六月',
          '七月',
          '八月',
          '九月',
          '十月',
          '十一月',
          '十二月'
        ],
        axisLabel: {
          margin: 20
        }
      },
      yAxis: {
        name: '上传量/本',
        type: 'value'
      },
      series: [
        {
          data: this.state.booksUploadNumChartData.lastYearChartData,
          type: 'line',
          smooth: true
        }
      ]
    })
  }
  //前年上传量
  beforeLastYearChart() {
    this.booksTrendsChart.setOption({
      title: {
        text: '前年书籍上传量'
      },
      xAxis: {
        name: '月',
        type: 'category',
        data: [
          '一月',
          '二月',
          '三月',
          '四月',
          '五月',
          '六月',
          '七月',
          '八月',
          '九月',
          '十月',
          '十一月',
          '十二月'
        ],
        axisLabel: {
          margin: 20
        }
      },
      yAxis: {
        name: '上传量/本',
        type: 'value'
      },
      series: [
        {
          data: this.state.booksUploadNumChartData.beforeLastYearChartData,
          type: 'line',
          smooth: true
        }
      ]
    })
  }
  render() {
    return (
      <Spin indicator={antIcon} spinning={this.state.isLoading}>
        <div className="booksUploadNumChart-chartBox">
          <div className="booksUploadNumChart-tab">
            <Button onClick={this.weekChart.bind(this)}>上周</Button>
            <br />
            <Button onClick={this.monthChart.bind(this)}>上月</Button>
            <br />
            <Button onClick={this.lastYearChart.bind(this)}>2018年</Button>
            <br />
            <Button onClick={this.beforeLastYearChart.bind(this)}>
              2017年
            </Button>
          </div>
          <div ref={this.booksTrends} className="booksUploadNumChart-chart" />
        </div>
      </Spin>
    )
  }
}
